﻿
@{
    ViewBag.Title = "Index";
}

<link href="~/Content/CSS/animate.css" rel="stylesheet" />
<link href="~/Content/lib/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Content/lib/DataTables/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="~/Content/CSS/userStyle.css" rel="stylesheet" />
<link href="~/Content/lib/jeDate/jedate/skin/jedate.css" rel="stylesheet" />
<script src="~/Content/lib/DataTables/js/jquery.dataTables.js"></script>
<script src="~/Content/lib/DataTables/js/dataTables.bootstrap.js"></script>
<script src="~/Content/JS/colResizable-1.5.min.js"></script>
<script src="~/Content/lib/jeDate/jedate/jquery.jedate.js"></script>
<script src="~/Content/lib/layer/layer.js"></script>
<style type="text/css">
    html > /**/ body .my_class {
         text-align:center;
    }
</style>
<script type="text/javascript">
    var table;
    $(function () {
        table = $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "scrollY": 366,
            "ajax": "/admin/userinfo/GetData",
            "dataType": "json",
           // "pagingType": "full_numbers",
            "sLoadingRecords": "正在加载数据...",
            "sZeroRecords": "暂无数据",
            //"stateSave": true,
            "searching": false,
            "aaSorting": [[1, "desc"]],//默认第几个排序
            "dom": 'rt<"bottom"iflp><"clear">',
            "columnDefs": [
                { className: "my_class", "targets": [0,1,2,3,4,5,6,7] },
                { "orderable": false, "aTargets": [0, 6]},// 不参与排序的列
                {
                    //   指定第一列，从0开始，0表示第一列，1表示第二列……
                    targets: 0,
                    "width": "50px",
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" name="checklist" id="checkboxall-' + row.id + '" value="' + row.id + '" />'
                    }
                }, {
                    //   指定第一列，从0开始，0表示第一列，1表示第二列……
                    targets: -1,
                    "width": "100px",
                    render: function (data, type, row, meta) {
                        return '<a type="button" class="btn btn-mini btn-info"  href="#" onclick="del(\'' + row.id + '\')" ><i class="icon icon-key"></i></a>&nbsp<a type="button" class="btn btn-mini btn-success"  href="#" onclick="del(\'' + row.id + '\')" ><i class="icon icon-pencil"></i></a>&nbsp<a type="button" class="btn btn-mini btn-danger"  href="#" onclick="del(\'' + row.id + '\')" ><i class="icon icon-times"></i></a>'
                    }
                }
            ],
            "language": {
                "processing": "玩命加载中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "url": "",
                "paginate": {
                    "first": "首页",
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "末页"
                }
            }
        });

        //单机行，选中复选框
        $("#example tr").slice(1).each(function (g) {
            var p = this;
            $(this).children().slice(1).click(function () {
                $($(p).children()[0]).children().each(function () {
                    if (this.type == "checkbox") {
                        if (!this.checked) {
                            this.checked = true;
                        } else {
                            this.checked = false;
                        }
                    }
                });
            });
        });


        //使用col插件实现表格头宽度拖拽
        $(".table").colResizable();

        //在搜索，或者分页的时候，调用该方法
        //这里只做具体说明，没有做实际服务端数据测试
        //重新加载表格数据（同等于刷新）
        //添加fnReloadAjax  js引用
        //参考http://www.datatables.net/plug-ins/api/fnReloadAjax
        $("#tb-refresh").on("click", function () {
            //加载一个新的文件
            //fnReloadAjax方法有3个主要参数
            //1、oSettings=[类似jquery ajax的data:{id:2}]
            //2、sNewSource=加载数据的URL
            //3、回调函数fnCallback
            //table.fnReloadAjax( 'media/examples_support/json_source2.txt' );
            //刷新新的数据
            //table.fnReloadAjax();
        });



        $("#checkboxall").prop("checked", false);

        $("body").on("change", "#checkboxall", function () {
            var checked = $("#checkboxall").is(":checked");
            $("input[id^='checkboxall-']").each(function () {
                if (checked) {
                    $(this).prop("checked", true);
                } else {
                    $(this).prop("checked", false);
                }
            });
        });

        //时间控件
        $("#indate").jeDate({
            format: "YYYY-MM-DD hh:mm:ss",
            isinitVal: true, //显示时间
            isTime: true,
            festival: true, //显示节日
            ishmsVal: false,
            minDate: "1970-01-01 00:00:00"
        });
        //结束时间
        $("#enddate").jeDate({
            isinitVal: true,
            festival: true,
            ishmsVal: false,
            minDate: '1997-06-16 23:59:59',
            format: "YYYY-MM-DD hh:mm:ss",
            zIndex: 3000,
        })

        //表头全选
        $("#btn-del").click(function () {
            var arrItemId = [];
            $("tbody :checkbox:checked").each(function (i) {
                var item = table.row($(this).closest('tr')).data();
                arrItemId.push(item);
            });

            //helper.layer_success("删除成功");
            helper.deleteItems(arrItemId);
        });

    });


    //删除用户信息判断
    function deleteItem(selectedItems) {
         if (selectedItems&&selectedItems.length) {
            if (selectedItems.length == 1) {
                alert("确定要删除 '" + selectedItems[0].userName + "' 吗?");
 
            }else{
                alert("确定要删除选中的" + selectedItems.length + "项记录吗?");
            }
            $.dialog.confirmDanger(message, function () {
               alert('执行删除操作');
            });
        }else{
            alert('请先选中要操作的行');
        }
    }


    /*
	参数解释：
	title	标题
	url		请求的url
	id		需要操作的数据id
	w		弹出层宽度（缺省调默认值）
	h		弹出层高度（缺省调默认值）
*/
    /*管理员-增加*/
    function admin_add(title, url, w, h) {
        helper.layer_show(title, url, w, h);
    }
</script>
<div class="clearfix usercontent">
    <!-- head star -->
    <div class="tnav row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2 class="fl">项目</h2>
            <ol class="breadcrumb fl">
                <li><a href="/admin/Home">主页</a></li>
                <li><strong>项目</strong></li>
            </ol>
        </div>
    </div>
    <!-- head end -->
    <!-- table star -->
    <div class="">
        <div class="wrapper wrapper-content animated fadeInUp scrollbar-hover" style="max-height:600px;padding-bottom:30px;overflow:scroll">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>所有项目</h5>
                    <div class="ibox-tools rboor">
                        <button id="btn-adduser" onclick="admin_add('添加用户', '/admin/userinfo/Add', '600', '530')" class="btn btn-info btn-sm"><i class="icon icon-plus"></i> 添加用户</button>
                        <button href="projects.html" onclick="helper.layer_error('用户名错误')" class="btn btn-info btn-sm"><i class="icon icon-pencil"></i> 编辑</button>
                        <button id="btn-del" class="btn btn-info btn-sm"><i class="icon icon-remove"></i> 删除</button>
                        <button href="projects.html" class="btn btn-info btn-sm"><i class="icon icon-check"></i> 批量审核</button>
                        <button id="tb-refresh" href="projects.html" class="btn btn-info btn-sm"><i class="icon icon-spinner icon-spin"></i> 刷新</button>
                    </div>
                </div>

                <div class="ibox-content">
                    <!-- search star -->
                    <div class="form-horizontal clearfix">
                        <div class="col-lg-3 col-sm-3">
                            <div class="form-group">
                                <div class="input-group">
                                    <label for="userid">用户：</label>
                                        <input type="text" id="userid" placeholder="用户名" />
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 ">
                            <div class="form-group pull-left">
                                <label class="col-lg-2  col-sm-2 control-label">日期：</label>
                                <div class="col-lg-9 col-sm-9 input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input id="indate" type="text" placeholder="请选择" class="input-sm form-control" />
                                    <span class="input-group-addon">到</span>
                                    <input id="enddate" type="text" placeholder="请选择" class="input-sm form-control" />
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-3">
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="email" placeholder="请输入用户名" class="input-sm form-control">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-info"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- search end -->
                    <table id="example" class="table table-striped table-bordered table-hover dataTables-example dataTable" cellspacing="0">
                        <thead>
                            <tr>
                                <th data-orderable="false"><input type="checkbox" id="checkboxall" /></th>
                                <th data-data="id">编号</th>
                                <th data-data="userName">用户名</th>
                                <th data-data="userPwd">密码</th>
                                <th data-data="realName">姓名</th>
                                <th data-data="subtime">创建时间</th>
                                <th data-data="remark">备注</th>
                                <th data-orderable="false">操作</th>
                            </tr>
                        </thead>
                        <!-- tbody是必须的 -->

                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- table end -->
</div>
